<template>
  <div class="m-tabbar-component-container">
    <router-link :to="{name: 'm-home'}">
      <img v-if="$route.name === 'm-home'" :src="icon.redHome">
      <img v-else :src="icon.home">
      <div>首页</div>
    </router-link>
    <router-link :to="{name: 'm-shop'}">
      <img v-if="$route.name === 'm-shop'" :src="icon.redShop">
      <img v-else :src="icon.shop">
      <div>商城</div>
    </router-link>
    <router-link :to="{name: 'm-serve'}">
      <img v-if="$route.name === 'm-serve'" :src="icon.redServe">
      <img v-else :src="icon.serve">
      <div>服务</div>
    </router-link>
    <router-link :to="{name: 'm-about'}">
      <img v-if="$route.name === 'm-about'" :src="icon.redAbout">
      <img v-else :src="icon.about">
      <div>关于</div>
    </router-link>
  </div>
</template>

<script>
import home from '../../assets/images/icon/home.svg'
import redHome from '../../assets/images/icon/red-home.svg'
import shop from '../../assets/images/icon/shop.svg'
import redShop from '../../assets/images/icon/red-shop.svg'
import serve from '../../assets/images/icon/serve.svg'
import redServe from '../../assets/images/icon/red-serve.svg'
import about from '../../assets/images/icon/about.svg'
import redAbout from '../../assets/images/icon/red-about.svg'

export default {
  name: 'MTabBarComponent',
  data() {
    return {
      icon: {
        home,
        redHome,
        about,
        redAbout,
        shop,
        redShop,
        serve,
        redServe,
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.m-tabbar-component-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: .485rem;
  background: #ffaaaa;
  box-shadow: 0 -0.01rem .1rem rgba(0, 0, 0, .7);

  display: flex;
  align-items: center;

  a {
    width: 25%;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-size: .12rem;
    line-height: 1;
    /*background: aqua;*/

    img {
      height: .2rem;
    }

    &.red-active {
      color: red;

      /*img {
        background: blue;
      }*/
    }
  }
}
</style>